<template>
    <ContentBase>
        <div class="pile-container">
            <div v-for="(item, index) in pileList.arr" :key="item.pileName" class="pile-card">
                <div class="pile-header">
                    <div class="pile-icon">
                        <i class="fas fa-charging-station"></i>
                    </div>
                    <div class="pile-status">
                        <button @click="turn_off(index)" v-if="item.isOn" type="button" class="btn btn-success">
                            <i class="fas fa-power-off"></i> 充电中
                        </button>
                        <button @click="turn_on(index)" v-if="!item.isOn" type="button" class="btn btn-secondary">
                            <i class="fas fa-power-off"></i> 已关闭
                        </button>
                    </div>
                </div>
                <div class="pile-info">
                    <h3 class="pile-name">{{ item.pileName }}</h3>
                    <div class="pile-stats">
                        <div class="stat-item">
                            <i class="fas fa-bolt"></i>
                            <span>累计充电次数：{{ item.ChargedCount }}</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-clock"></i>
                            <span>充电总时长：{{ item.TotalChargingTime }}</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-battery-full"></i>
                            <span>充电总电量：{{ item.TotalChargingCapacity }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ContentBase>
</template>
  
  
<script>
import ContentBase from '@/components/ContentBase.vue';
import $ from 'jquery';
import { reactive, onMounted } from 'vue';

export default {
    name: 'ChargingPileGeneralView',
    components: {
        ContentBase,
    },
    methods: {
        turn_off(index) {
            // 关闭充电桩
            // 获取本充电桩的pileId
            var pileId = this.pileList.arr[parseInt(index)].pileName
            const data = {
                pileId: pileId
            }
            // 调用请求 /admin/offCharger
            $.ajax({
                url: process.env.VUE_APP_BACKEND_URL + '/admin/offCharger',
                type: "post",
                headers: {
                    'Content-Type': 'application/json'
                },
                // 需要传递参数，String 类型是 pileId
                data: JSON.stringify(data),
                success(resp) {
                    console.log(resp)
                }
            });
            this.pileList.arr[parseInt(index)].isOn = false
        },
        turn_on(index) {
            // 打开充电桩/恢复
            var pileId = String(this.pileList.arr[parseInt(index)].pileName)
            const data = {
                pileId: pileId
            }
            // 调用请求 
            $.ajax({
                url: process.env.VUE_APP_BACKEND_URL + '/admin/startCharger',

                type: "post",
                // 需要传递参数，String 类型是 pileId
                data: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                },
                success(resp) {
                    console.log(resp)
                }
            });
            this.pileList.arr[parseInt(index)].isOn = true
        }
    },
    setup() {
        const pileList = reactive({ arr: [] });
        function getPileInfo() {
            const pileIdList = ["慢桩A", "慢桩B", "慢桩C", "快桩A", "快桩B"];
            // 获取后端数据，用于控制开关和充电桩状态
            for (let index = 0; index < pileIdList.length; index++) {
                const pileId = pileIdList[index];
                $.ajax({
                    url: process.env.VUE_APP_BACKEND_URL + '/admin/checkCharger',
                    type: "get",
                    // 需要传递参数，String 类型是 pileId
                    data: {
                        pileId: pileId
                    },
                    success(resp) {
                        var res = {}
                        res['pileName'] = pileId
                        res['ChargedCount'] = resp.data['total_charge_num']
                        res['TotalChargingTime'] = resp.data['total_charge_time']
                        res['TotalChargingCapacity'] = resp.data['total_capacity']
                        res['isOn'] = resp.data['working_state'] == -1 || resp.data['working_state'] == 0 ? false : true
                        pileList.arr.push(res)
                    }
                });
            }
        }
        onMounted(() => {
            getPileInfo();
        });
        return {
            pileList, getPileInfo
        }
    }
}
</script>
  
<style scoped>
.pile-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.pile-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.pile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

.pile-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
}

.pile-icon i {
    font-size: 2rem;
    color: white;
}

.pile-status button {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.pile-status button:hover {
    transform: scale(1.05);
}

.pile-info {
    padding: 1.5rem;
}

.pile-name {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.pile-stats {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #666;
    font-size: 0.95rem;
}

.stat-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

@media (max-width: 768px) {
    .pile-container {
        grid-template-columns: 1fr;
    }
}
</style>
  